<template>
	<el-dialog v-model="state.dialogFormVisible" width="60%" :z-index="9" top="5vh" :close-on-click-modal="false" @close="cancelHandle">
		<template #header>
			<div class="custom-header">{{ state.form.id ? (state.isUpdateFlag ? '查看' : '编辑') : '新增' }}</div>
		</template>

		<div class="dialog-content">
			<el-form ref="ruleFormRef" :model="state.form" :rules="rules">
				<el-form-item prop="standardName" label="标准名称" label-width="190px">
					<el-input v-model="state.form.standardName" autocomplete="off" :disabled="state.isUpdateFlag" />
				</el-form-item>
				<el-form-item prop="projectName" label="工程名称" label-width="190px">
					<el-input v-model="state.form.projectName" autocomplete="off" :disabled="state.isUpdateFlag" />
				</el-form-item>
				<el-form-item prop="constructionNumber" label="报建编号" label-width="190px">
					<el-input v-model="state.form.constructionNumber" :disabled="state.isUpdateFlag" />
				</el-form-item>

				<el-row>
					<el-col :span="10">
						<el-form-item label="建筑面积(m²)" label-width="190px" prop="buildArea">
							<el-input v-model="state.form.buildArea" autocomplete="off" type="number" min="0" :disabled="state.isUpdateFlag" />
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="建筑高度(m)" label-width="100px" prop="buildHeight">
							<el-input v-model="state.form.buildHeight" autocomplete="off" type="number" min="0" :disabled="state.isUpdateFlag" />
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="建筑类别" label-width="100px" prop="builtdType">
							<el-input v-model="state.form.builtdType" autocomplete="off" :disabled="state.isUpdateFlag" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="10">
						<el-form-item prop="foundationType" label="基础类型" label-width="190px">
							<el-input v-model="state.form.foundationType" autocomplete="off" :disabled="state.isUpdateFlag" />
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item prop="structureType" label="结构类型" label-width="100px">
							<el-input v-model="state.form.structureType" autocomplete="off" :disabled="state.isUpdateFlag" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item prop="buildLayer" label="建筑层数" label-width="190px">
					<el-input v-model="state.form.buildLayer" autocomplete="off" :disabled="state.isUpdateFlag" type="number" min="0" />
				</el-form-item>

				<el-row>
					<el-col :span="12">
						<el-form-item prop="buildUpLayers" label="地上(层)" label-width="190px">
							<el-input v-model="state.form.buildUpLayers" autocomplete="off" :disabled="state.isUpdateFlag" type="number" min="0" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item prop="buildDownLayers" label="地下(层)" label-width="100px">
							<el-input v-model="state.form.buildDownLayers" autocomplete="off" :disabled="state.isUpdateFlag" type="number" min="0" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item prop="designInstitute" label="设计单位" label-width="190px">
					<el-input v-model="state.form.designInstitute" autocomplete="off" :disabled="state.isUpdateFlag" />
				</el-form-item>
				<el-form-item prop="drawingReviewUnit" label="审图单位" label-width="190px">
					<el-input v-model="state.form.drawingReviewUnit" autocomplete="off" :disabled="state.isUpdateFlag" />
				</el-form-item>
				<el-form-item prop="constructionUnit" label="施工单位" label-width="190px">
					<el-input v-model="state.form.constructionUnit" autocomplete="off" :disabled="state.isUpdateFlag" />
				</el-form-item>
				<el-form-item prop="isStandard" label="本工程是否使用该标准" label-width="190px">
					<el-radio-group v-model="state.form.isStandard" :disabled="state.isUpdateFlag">
						<el-radio label="1" size="large">是</el-radio>
						<el-radio label="0" size="large">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item prop="implementationMeasures" label="标准认知、宣贯培训情况" label-width="190px">
					<el-input v-model="state.form.implementationMeasures" :disabled="state.isUpdateFlag" />
				</el-form-item>
				<el-form-item prop="checkContent" label="检查内容(相关条文)" label-width="190px">
					<el-input v-model="state.form.checkContent" :disabled="state.isUpdateFlag" />
				</el-form-item>

				<el-form-item prop="implementationStatus" label="执行情况" label-width="190px">
					<el-radio-group v-model="state.form.implementationStatus" :disabled="state.isUpdateFlag">
						<el-radio label="1" size="large">符合</el-radio>
						<el-radio label="0" size="large">不符合</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item prop="proposal" label="对不符合规范原因及建议" label-width="190px">
					<el-input v-model="state.form.proposal" :disabled="state.isUpdateFlag" />
				</el-form-item>
				<el-form-item prop="writtenInformation" label="需要提供的书面材料" label-width="190px">
					<el-input v-model="state.form.writtenInformation" :disabled="state.isUpdateFlag" />
				</el-form-item>

				<el-row>
					<el-col :span="12">
						<el-form-item prop="inspectionDate" label="检查日期" label-width="190px">
							<el-date-picker
								v-model="state.form.inspectionDate"
								:disabled="state.isUpdateFlag"
								type="date"
								value-format="YYYY-MM-DD HH:mm:ss"
								format="YYYY-MM-DD"
								placeholder="选择日期"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item prop="completedBy" label="填报人" label-width="100px">
							<el-input v-model="state.form.completedBy" :disabled="state.isUpdateFlag" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<template v-if="!state.isUpdateFlag" #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">确认</el-button>
				<el-button @click="cancelHandle"> 关闭 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { qiangzhiaddApi, qiangzhieditApi } from '@/api/government'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
interface RuleForm {
	name: string
	region: string
}
const state = reactive({
	form: {
		id: '',
		standardName: '',
		projectName: '',
		constructionNumber: '',
		buildArea: 0,
		buildHeight: 0,
		builtdType: '',
		foundationType: '',
		structureType: '',
		buildUpLayers: null,
		buildLayer: null,
		buildDownLayers: null,
		designInstitute: '',
		drawingReviewUnit: '',
		constructionUnit: '',
		isStandard: '',
		implementationMeasures: '',
		checkContent: '',
		implementationStatus: '',
		proposal: '',
		writtenInformation: '',
		inspectionDate: '',
		completedBy: ''
	},
	dialogFormVisible: false
})
const emit = defineEmits(['refreshDataList'])
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
	standardName: [{ required: true, message: '请输入标准名称', trigger: 'blur' }],
	projectName: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
	constructionNumber: [{ required: true, message: '请输入报建编号', trigger: 'blur' }],
	buildArea: [{ required: true, message: '请输入建筑面积', trigger: 'blur' }],
	// buildHeight: [{ required: true, message: '请输入建筑高度', trigger: 'blur' }],
	// builtdType: [{ required: true, message: '请输入建筑类别', trigger: 'blur' }],
	// foundationType: [{ required: true, message: '请输入基础类型', trigger: 'blur' }],
	// structureType: [{ required: true, message: '请输入结构类型', trigger: 'blur' }],
	// buildUpLayers: [{ required: true, message: '请输入地上层数', trigger: 'blur' }],
	// buildDownLayers: [{ required: true, message: '请输入地下层数', trigger: 'blur' }],
	designInstitute: [{ required: true, message: '请输入设计单位', trigger: 'blur' }],
	drawingReviewUnit: [{ required: true, message: '请输入审图单位', trigger: 'blur' }],
	constructionUnit: [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
	isStandard: [{ required: true, message: '请选择本工程是否使用该标准', trigger: 'change' }],
	// implementationMeasures: [{ required: true, message: '请输入标准认知、宣贯培训情况', trigger: 'blur' }],
	// checkContent: [{ required: true, message: '请输入检查内容(相关条文)', trigger: 'blur' }],
	implementationStatus: [{ required: true, message: '请选择执行情况', trigger: 'change' }]
	// proposal: [{ required: true, message: '请输入对不符合规范原因及建议', trigger: 'blur' }],
	// writtenInformation: [{ required: true, message: '请输入需要提供的书面材料', trigger: 'blur' }],
	// inspectionDate: [{ required: true, message: '请选择检查日期', trigger: 'change' }],
	// completedBy: [{ required: true, message: '请选择检查人', trigger: 'change' }]
})

const init = (isUpdate: any, row: any, isChakan: any) => {
	state.isUpdateFlag = isUpdate

	if (isChakan) {
		detailMethods(row)
	}
	state.dialogFormVisible = true
}
const submit = () => {
	ruleFormRef.value?.validate(valid => {
		if (valid) {
			const temp = state.form.id ? qiangzhieditApi : qiangzhiaddApi
			temp(state.form).then(() => {
				ElMessage.success({
					message: '提交成功',
					duration: 500
				})
				state.dialogFormVisible = false
				cancelHandle()
			})
		}
	})
}

const detailMethods = async (row: any) => {
	console.log(row, 'Sgsgsgsg')
	state.form.id = row.id
	state.form.standardName = row.standardName
	state.form.projectName = row.projectName
	state.form.constructionNumber = row.constructionNumber
	state.form.buildArea = row.buildArea
	state.form.buildHeight = row.buildHeight
	state.form.builtdType = row.builtdType
	state.form.foundationType = row.foundationType
	state.form.structureType = row.structureType
	state.form.buildUpLayers = row.buildUpLayers
	state.form.buildDownLayers = row.buildDownLayers
	state.form.designInstitute = row.designInstitute
	state.form.drawingReviewUnit = row.drawingReviewUnit
	state.form.constructionUnit = row.constructionUnit
	state.form.isStandard = row.isStandard
	state.form.implementationMeasures = row.implementationMeasures
	state.form.checkContent = row.checkContent
	state.form.implementationStatus = row.implementationStatus
	state.form.proposal = row.proposal
	state.form.writtenInformation = row.writtenInformation
	state.form.inspectionDate = row.inspectionDate
	state.form.completedBy = row.completedBy
}

const cancelHandle = () => {
	ruleFormRef.value?.resetFields() // 表单验证关闭
	state.dialogFormVisible = false
	const aa = {
		id: '',
		standardName: '',
		projectName: '',
		constructionNumber: '',
		buildArea: 0,
		buildHeight: 0,
		builtdType: '',
		foundationType: '',
		structureType: '',
		buildUpLayers: null,
		buildLayer: null,
		buildDownLayers: null,
		designInstitute: '',
		drawingReviewUnit: '',
		constructionUnit: '',
		isStandard: '',
		implementationMeasures: '',
		checkContent: '',
		implementationStatus: '',
		proposal: '',
		writtenInformation: '',
		inspectionDate: '',
		completedBy: ''
	}
	state.form = { ...aa }

	emit('refreshDataList')
}
defineExpose({
	init
})
</script>

<style scoped>
.dialog-footer {
	padding-bottom: 20px;
}

.dialog-content {
	height: calc(80vh - 60px);
	/* 设置最大高度 */
	overflow-y: auto;
	/* 启用垂直滚动 */
	padding: 10px;
	/* 可选：添加内边距 */

	&::-webkit-scrollbar {
		display: none;
	}
}
</style>
